<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view  class="text-area">
      <text class="title u-border-bottom">{{ title }}</text>
	  <u-icon name="photo"></u-icon>
	  <up-button type="primary" shape="circle" text="按钮形状" @click="addInfo"></up-button>
	  <up-tag text="标签" type="warning"></up-tag>
	  
    </view>
	<view class="">
		 <up-tooltip text="下方显示" direction="bottom"></up-tooltip>
	</view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useUserInfoStore } from "@/stores/userInfo";
import { login } from "@/utils/api";
const userInfo = useUserInfoStore();
const title = ref<number>(0)
// 测试ts类型支持
const info = reactive<User>({ 
	name:"niha",
	passsword:'sajsklajk',
})
// 测试持久化存储功能
const addInfo = async ()=>{
	console.log(info)
	userInfo.setUserInfo("你好");
	uni.showLoading({
		mask:true,
		title:"加载中"
	})
	const data = await login();
	console.log(data);
}
console.log(userInfo.userInfo);
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
